// 引入初始化样式文件
import '@/styles/common.scss'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
// import { useIntersectionObserver } from '@vueuse/core'
import App from './App.vue'
import router from './router'
// 引入全局懒加载指令插件并且注册
import {lazyPlugin} from './directives'
// 引入全局组件插件
import { componentPlugin } from '@/components/index.js'
const app = createApp(App)
const pinia=createPinia()
// 注册持久化插件
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router)
app.use (lazyPlugin)
app.use(componentPlugin)
app.mount('#app')

/* // 定义全局指令
app.directive('img-lazy', {
    mounted(el, binding) {
        // el指的是绑定的那个元素img
        // binding:binding.value 指令等于后边绑定的表达式的值   图片url

        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
            // isIntersecting:是否进入视口区域
            console.log(isIntersecting)
            if (isIntersecting) {
                // 进入视口区域
                el.src = binding.value
                stop()
            }
        },
        )
    }
}) */